<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 查询区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="search-form"
      size="small"
    >
      <el-form-item label="充值时间">
        <el-date-picker
          v-model="searchForm.rechargeTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="充值状态">
        <el-select
          v-model="searchForm.rechargeStatus"
          placeholder="选择状态"
          clearable
          style="width: 120px"
        >
          <el-option label="充值成功" value="0"/>
          <el-option label="充值失败" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      size="small"
      element-loading-text="加载中..."
    >
      <el-table-column
        prop="studentName"
        label="学生姓名"
        align="center"
      />
      <el-table-column
        prop="rechargeHours"
        label="充值课时数"
        align="center"
      />
      <el-table-column
        prop="beforeHours"
        label="充值前剩余课时"
        align="center"
      />
      <el-table-column
        prop="afterHours"
        label="充值后总课时"
        align="center"
      />
      <el-table-column
        prop="rechargeTime"
        label="充值时间"
        align="center"
      />
      <el-table-column
        prop="rechargeStatus"
        label="充值状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.rechargeStatus === '0' ? 'success' : 'danger'"
          >
            {{ scope.row.rechargeStatus === '0' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div v-if="total > 0" class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
import { queryPageStudent } from '@/api/studentRechargeRecord'

export default {
  name: 'StudentClassHourRechargeRecordDialog',
  props: {
    // 对话框标题
    title: {
      type: String,
      default: `学生课时充值记录`
    },
    // 对话框是否可见
    visible: {
      type: Boolean,
      default: false
    },
    // 对话框宽度
    dialogWidth: {
      type: String,
      default: '90%'
    },
    student: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 加载状态
      loading: false,
      // 总条数
      total: 0,
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      // 查询表单
      searchForm: {
        rechargeTimeRange: [],
        rechargeStatus: ''
      }
    }
  },
  created() {
    this.currentPage = 1
    if (this.student) {
      this.title = `${this.student.name}的课时充值记录`
    }
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      // 构造查询参数
      console.log('this.searchForm.rechargeTimeRange', this.searchForm.rechargeTimeRange)
      const params = {
        page: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },
        param: {
          studentId: this.student.id,
          rechargeStatus: this.searchForm.rechargeStatus
        }
      }

      if (this.searchForm.rechargeTimeRange) {
        params.param.startRechargeTime = this.searchForm.rechargeTimeRange[0] || ''
        params.param.endRechargeTime = this.searchForm.rechargeTimeRange[1] || ''
      }

      // 调用API获取数据（此处替换为实际接口调用）
      const response = await queryPageStudent(params)
      this.tableData = response.records
      this.total = response.total * 1
      this.loading = false
    },

    // 处理查询
    handleSearch() {
      this.currentPage = 1
      this.loadData()
    },

    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        operatorName: '',
        studentName: '',
        rechargeTimeRange: [],
        rechargeStatus: ''
      }
      this.currentPage = 1
      this.loadData()
    },

    // 处理每页条数变化
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.loadData()
    },

    // 处理页码变化
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadData()
    },

    // 处理对话框关闭
    handleClose() {
      this.$emit('update:visible', false)
      // 重置表单
      this.resetSearch()
    }
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 10px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>
